<!--围栏地图页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">新增围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="router.push('/geofence')">返回
    </el-button>
  </div>

  <!-- 第2步: 准备一个用来装地图的容器-->
  <div id="mapContainer" style="height: 84vh;width: 100%;"></div>

  <!--  新增电子围栏弹窗-->
  <el-dialog title="围栏信息" v-model="dialogVisible"
             :before-close="closeDialog">
    <el-form label-width="80px">
      <el-form-item label="围栏名称">
        <el-input placeholder="请输入围栏名称" v-model="geofence.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="saveGeofence">确定</el-button>
    </template>
  </el-dialog>


</template>


<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import { DrawScene, DrawControl ,OperateEventType} from 'bmap-draw';
import qs from 'qs';
import axios from "axios";

//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
//定义对象存储围栏数据
const geofence = ref({
  name: '',//围栏名称
  position: {}//围栏坐标点,位置信息
})
//定义对象用于保存全局地图对象
var map;
onMounted(() => {
      //表示在DOM更新后再执行，因为要确保上方地图容器已创建
  //
      nextTick(() => {
        //第3步:创建地图实例，不用导入！
        map = new BMapGL.Map("mapContainer");
        //第4步:设置中心点经纬度坐标
        var point = new BMapGL.Point(116.4074, 39.9024);
        //第5步:设置地图的中心点与缩放级别
        map.centerAndZoom(point, 15);

        // 添加鼠标绘制控件
        //1.创建绘制场景类,需要导入. 此类为其它鼠标绘制的基类,参数为刚刚创建的地图实例对象
        const scene = new DrawScene(map);
        //2.创建鼠标绘制控件对象,基于上面的绘制场景,设置自己的绘制项,需要导入!参数为刚刚创建的地图实例对象和配置项
        const drawContrl = new DrawControl(scene, {
          //3.绘制控件的配置信息
          //3.1是否显示提示信息,默认关闭
          enableTips: false,
          //3.2设置绘制的控件的位置,默认右上角
          anchor: BMAP_ANCHOR_TOP_RIGHT,
          //3.3设置绘制项 circle:圆形, rectangle:矩形
          drawingItems: [
            'circle',
            'rectangle'
          ]
        });
        //5.监听绘制事件,返回触发完成事件的电子围栏对象
        scene.addEventListener(OperateEventType.COMPLETE,(event)=>{
          //用户点击对号时,显示输入围栏名称的弹窗
          dialogVisible.value=true;
          //打印触发这个事件的电子围栏对象
          console.log(event.target);
          //6.从触发事件对象中获取围栏对象
          let overlay = event.target.overlay;
          //7.判断当前的围栏类型是圆形还是矩形,分别处理
          //instanceof用来判断overlay对象是否为BMapGL.Circle类的实例
          if(overlay instanceof BMapGL.Circle){//圆形
            //8.1设置类型为圆形
            geofence.value.position.type='circle';
            //8.2设置围栏的半径
            geofence.value.position.radius=overlay.getRadius();
            //8.3设置围栏圆心的经纬度
            geofence.value.position.longitude=overlay.getCenter().lng;
            geofence.value.position.latitude=overlay.getCenter().lat;
            console.log(geofence.value);
            console.log(geofence.value.position);

          }else {//矩形
            //9.1定义数组来保存矩形四个顶点坐标值
            let recPoints=[];
            for (var i =0;i<4;i++){
              //循环4次,依次取出围栏对象cA坐标系下的四个定点,并以 经度-维度 的形式存入数组中
              //push 方法：用于将一个或多个元素添加到数组的末尾，并返回数组的新长度。
             recPoints.push(overlay.points[i].latLng.lng+'-'+overlay.points[i].latLng.lat);
            }
            //9.2设置类型为矩形
            geofence.value.position.type='rectangle';
            //9.3将矩形坐标数组对象,转为以逗号分割的字符串
            //join 方法：用于将数组的所有元素连接成一个字符串，元素之间可以使用指定的分隔符
            geofence.value.position.recPoints=recPoints.join(',');
            console.log(geofence.value);
            console.log(geofence.value.position);

          }
        })
        //4.为地图设置绘制控件,参数为刚刚创建的绘制控件对象
        map.addControl(drawContrl);
      })
    }
)
//定义新增围栏的方法
const saveGeofence = () => {
  if (!geofence.value.name || geofence.value.name.trim() === '') {
    ElMessage('围栏名称不能为空');
    return;//结束方法,不再执行后续代码
  }
  //geofence的position也是一个对象,所以需要先转换position,再转换geofence,才能给后端发请求
  geofence.value.position = JSON.stringify(geofence.value.position);
  let data = qs.stringify(geofence.value);
  console.log(data);
  //向后端发送请求,保存围栏数据
  axios.post(BASE_URL + "/v1/geofence/save", data).then((res) => {
    if (res.data.code !== 2000) {
      ElMessage.error(res.data.msg);
      return;
    }
    ElMessage.success("保存成功!");
    //关闭弹窗
    dialogVisible.value = false;
    //跳转到围栏列表页面
    router.push('/geofence');

  })


}
//定义关闭弹窗的方法
const closeDialog = () => {
  if (confirm('确认关闭吗')) {
    dialogVisible.value = false;
    //清除地图上绘制的围栏遮罩图形
    map.clearOverlays();
  }
}
</script>


<style scoped>

</style>